<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="icon" href="./2021_img/xin.favicon.ico.png">

    <script src="./js/jquery.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <title>details </title>
    <style>
        /* 初始化样式 */
        * {
          margin: 0;
          padding: 0;    
        }
        /* 清除列表样式 */
        ul,ol {list-style: none;}
        /* a标签去掉下划线 */
        .center ul li a {
          font-size: 18px;
          color: rgb(113, 156, 236);
          text-decoration: none;
        }
        /* 清除浮动 */
        .clearfix::after{
          content: "";
          display: block;
          clear: both;
        }
        /* 导航部分 */
        .nav {
          background-color: rgb(240, 229, 216);
        }
        /* 定宽居中 */
        .center {
          width: 1200px;
          margin: auto;
        }
        .nav h1 {
          color: rgb(233, 141, 141);
          font-weight: 600;
          float: left;
          /* 加右外间距使h2左边有一段距离 */
          margin-right: 36px;
          /* 加行高使h2垂直居中 */
          line-height: 50px;
          margin-top: 28px;
        }
        .nav ul {
          float: right;
          height: 50px;
          /* 让li横着排列 */
          display: flex;
          margin: 30px auto;
          font-size: 16px;
        }
        .nav ul li {
          /* 给li宽和高 然后让她水平居中 垂直居中 */
          width: 150px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          transition: 1s;
          margin: 0px 20px;
          border-radius: 15% 15% 70% 75%;
          background-color:rgb(245, 173, 168)
        }
        .nav ul li:hover {
          border-radius: 15% 15% 70% 75%;
          background-color:rgba(109, 189, 192,0.8);
        }
        .nav ul li:hover >a {
          color: #fff;      
        }
        .logo-bg {
          margin-top: 110px;
          height: 418px;
          background-image: url(./2021_img/background2.jpg);
          background-size: cover;
        }
        .logo-bg img {
            width: 100%;
            height: 100%;
            background-size: contain;
        }
        .tu .p1 {
            width: 590px;
            height: 300px; 
            background-image:url(./2021_img/p3.png);
            margin-top: 20px;
        }
        .tu .p2 {
            width: 610px;
            height: 300px;
            background-image: url(./2021_img/flower2.jpg);
            margin-top: 20px;
        }
        .zi {
          margin: auto 10px;
        }
        .zi h1,h3 {
          color: rgb(131, 64, 175);
        }
        .zi p {
          color: rgb(105, 104, 104);
          font-size: 16px;
        }
        .zi button a {
          list-style: none;
        }
        .zi button {
          border: 2px solid rgb(136, 68, 189);
          outline-style: none;
          width: 180px;
          height: 50px;
          color: rgb(136, 68, 189);
          background-color: rgb(225, 213, 236);
          transition: 1s;
        }
        .zi button:hover {
          background-color: rgb(197, 155, 236);
          color: antiquewhite;
          outline-style: none;
        }
        .xi {
          width: 1200px;
          height: 10px;
          display: block;
          /* background-color: aquamarine; */
          background-image: url(./2021_img/xuxian.jpg);
        }
        .p3 {
          margin-top: 60px;
          width: 620px;
          height: 120px;
          /* background-color: rgb(117, 211, 190); */
        }
        .p4 {
          margin-top: 60px;
          width: 560px;
          height: 120px;
          /* background-color: rgb(117, 211, 190); */
          margin-left: 80px;
        }
        .p3 span {
          padding-left: 10px;
          display: block;
          color: rgb(121, 67, 172);
          font-size: 30px;
        }
        .p4 span {
          padding-left: 10px;
          display: block;
          color: rgb(121, 67, 172);
          font-size: 30px;
        }
        .one1 .span2{
          width: 406px;
          height: 80px;
          /* background-color: rgb(181, 255, 230); */
        }
        .one1 img {
          width: 169px;
          height: 144px;
        }
        .l  {
          color: rgb(73, 129, 233);
        }
        .r {
          margin-left: 77px;
          width: 534px;
          height: 526px;
          /* background-color: rgb(221, 156, 133); */
          float: left;
        }
        .two1 {
          border-radius: 10%;
          margin: 19px 5px ;
          background-color: rgb(202, 178, 240);
        }
        .dd {
          margin: 15px 10px;
        }
        .d1 {
          text-align: center;
          width: 100px;
          height: 40px;
          background-color: rgb(146, 230, 226);
          display: block;
          /* margin: 10px 0 0 0; */
        }
        .d2 {
          width: 100px;
          text-align: center;
          font-size: 24px;
          padding-bottom: 2px;
          color: rgb(170, 85, 245);
          background-color: rgb(146, 230, 226);
          display: block;
        }
        .ss {
          margin: 15px 5px;
        }
        .ss1 {
          color: bisque;
          font-size: 18px     ;
        }
        .ss2 {
          text-indent: 2em;
          color: bisque;
          font-size: 15px;
        }
        .logo {
          margin: 16px 0px;
          height: 250px;
          background-color: rgb(245, 135, 135);
        }
        .logo img {
          width: 100%;
          height: 100%;
          background-size: contain;
        }
        .top li{
          width: 240px;
          margin: 20px 5px;
          border-radius: 13%;
          background-color: rgb(221, 245, 182);
          /* 让button元素水平居中了 */
          text-align: center;  
          font-size: 18px;
          
        }
        .top li img{
          width: 200px;
          height: 200px;
          margin:20px 10px;
        }
        .bottom li {
          width: 240px;
          margin: 20px 5px;
          border-radius: 13%;
          background-color:rgb(221, 245, 182);
          text-align: center;
          font-size: 18px;
          
        }
        .bottom li img {
          width: 200px;
          height: 200px;
          margin: 20px 10px;
        }
        .top li div button {
          border:2px solid darkkhaki;
          margin: 5px auto 25px;
          width: 100px;
          height: 40px; 
          background-color: rgb(250, 244, 162);
          border-radius: 12%;
          color: rgb(152, 100, 237);
          transition: 1s;
        }
        .top li div button:hover {
          color: rgb(101, 135, 247);
          border: 2px solid rgb(245, 240, 252);
          background-color: rgb(155, 186, 243);
          transform: scale(1.1);
        }
        .bottom li div button {
          border:2px solid darkkhaki;
          margin: 5px auto 25px;
          width: 100px;
          height: 40px; 
          background-color: rgb(250, 244, 162);
          border-radius: 12%;
          color: rgb(152, 100, 237);
          transition: 1s;
        }
        .bottom li div button:hover {
          color: rgb(101, 135, 247);
          border: 2px solid rgb(245, 240, 252);
          background-color: rgb(155, 186, 243);
          transform: scale(1.1);
        }
        /* **************页尾的style样式************** */
        * {
            margin: 0;
            padding: 0;
        }
        .one {
          background-color:rgba(159, 106, 180, 0.8)
        }
        ul {
            justify-content: center;
            margin: auto;
            list-style: none;
            
        }
        .two li {
            width: 100px;
            height: 100px;
            margin: 86px 120px 120px;
            text-align: center;
            color: rgb(247, 244, 253);
        }
        .two img {
            width: 100px;
            height: 100px;
        }
        .two li span {
            font-size: 18px;
        }
        .two li p {
            margin-left: -30px;
            width: 160px;
            text-align: center;
            font-size: 14px;
        }
        .y1 {
          height: 500px;
          background-color: aquamarine;
        }
        .top img:hover {
          transition: 1s;
          transform: scale(1.1);
        }
        .bottom img:hover {
          transition: 1s;
          transform: scale(1.1);
        }
      </style>
</head>
<body>
    <!-- 页头 -->
        <div class="nav fixed-top d-flex">
        <div class="center clearfix">
          <h1>Flower Sea</h1>
            <ul>
              <li><a href="#">首 页</a></li>
              <li><a href="#">展 览</a></li>
              <li><a href="#">看 点</a></li>
              <li><a href="./05.reading.html">订 阅</a></li>
            </ul>
        </div>
      </div>
      <!-- 第一张大背景 -->
            <div class="logo-bg"></div>
      <!-- 背景图下面的图文 -->
      <div class="center">
        <div class="tu d-flex">
            <div class="p1 float-left"></div>
            <div class="p2 float-left">
              <div class="zi">
                <h1>ABOUT US</h1>
                <h3>关于我们</h3>
                <p>xxx花艺在线，是在《xxx》社的大力支持下，由北京龙焱世纪文化交流 有限公司投资成立的国内首家花艺,该xx平台的出现, 将弥补国内花店业远程 教育的空白，将更好地为中国花店业服务。 为促进xx花店业的交流更快更 好地与国际接轨打下良好的基础，提升花艺设计及产品创新能力我们将携手 国内、外最优秀的花艺师推出适合本地市场需要的商业花礼设</p>
                <button>
                  <a href="./05.showing.html">了解更多</a>
                </button>
              </div>
            </div>
        </div>
        <div class="tu2 d-flex">
          <div class="p3 float-left">
            <span>FLOWER</span>
            <span style="font-size: 20px;">花卉资讯</span>
          </div>
          <div class="p4 float-left">
            <span>NEWS</span>
            <span style="font-size: 20px;">新闻动态</span>
          </div>
        </div>
        <div class="tu3 d-flex">
          <div class="l">
            <div class="one1 d-flex">
                <img src="./2021_img/flower10.jpg" alt="" class="img1 float-left">
              <div class="one1 float-left">
                <h5 class="d-block ml-3 m-2">世界月季大会首次在中国举行</h5>
               <span class="d-block ml-3">2021-12-6</span>
               <span class="span2 d-block  ml-3 text-wrap">中国月季花展曾先后在河南郑州、辽宁沈阳、北京举办了三届。2008年4月28日，常州获得第四届月季花展的承办</span>
              </div>
            </div>
            <div class="one1 d-flex mt-5 mb-5">
              <img src="./2021_img/new1.jpg" alt="" class="float-left">
              <div class="float-left">
                <h5 class="d-block ml-3 m-2">比汽车还大的花篮</h5>
               <span class="d-block ml-3">2021-12-7</span>
               <span class="span2 d-block  ml-3 text-wrap">在海交会的大广场上，看到了一个比几架汽车都要大的大花篮。新的海峡国际会展中心，像是一只展翅飞翔的美丽的大蝴蝶呢！</span>
              </div>
            </div>
            <div class="one1 d-flex">
              <img src="./2021_img/hua1.jpg" alt="" class="float-left">
              <div class=" float-left">
                <h5 class="d-block ml-3 m-2">“中国30大花卉品牌”评选活动启动</h5>
               <span class="d-block ml-3">2021-12-8</span>
               <span class="span2 d-block  ml-3 text-wrap">改革开放至今已30多年。在这30多年中，我国花卉产业在规模、效益和科技水平等方面均有了快速发展，并涌现出一批享誉全国的花卉品牌</span>
              </div>
            </div>
          </div>
          <div class="r">
              <div class="d-flex two1">
                <div class="dd">
                  <div class="d1"><h3>05</h3></div>
                  <div class="d2">2021-07</div>
                </div>
                <div class="ss">
                  <span class="float-left ss1">七夕：南京街头花店冷清,网上花店热潮</span>
                  <span class="float-left ss2">今年闰七月，将有两个阴历七月七日，中国传统的情人节“七夕”将额外多出一次,记者采访“双份”的中国情人节</span>
                </div>
            </div>
            <div class="d-flex two1">
              <div class="dd">
                <div class="d1"><h3>06</h3></div>
                <div class="d2">2021-07</div>
              </div>
              <div class="ss">
                <span class="float-left ss1">网上花店青睐情人节</span>
                <span class="float-left ss2">春节前夕，在网上接到情人节的第一个订单，进了正月，李XX就开始忙活起来，接单、订货、雇送花人</span>
              </div>
          </div>
          <div class="d-flex two1">
            <div class="dd">
              <div class="d1"><h3>07</h3></div>
              <div class="d2">2021-07</div>
            </div>
            <div class="ss">
              <span class="float-left ss1">玲珑粉、黄金海岸、白马王子,马蹄莲</span>
              <span class="float-left ss2">非洲菊又名扶郎花，象征互敬互爱，有毅力、不畏艰难，又有“扶持郎君，事业发达”之寓意，因此许多市民喜欢</span>
            </div>
        </div>
        <div class="d-flex two1">
          <div class="dd">
            <div class="d1"><h3>08</h3></div>
            <div class="d2">2021-07</div>
          </div>
          <div class="ss">
            <span class="float-left ss1">“我们家的网上花卉店已经达到‘皇冠’级别了!”</span>
            <span class="float-left ss2">花卉已逐渐成为市民时尚休闲的特需产品，市场潜力巨大，呈现出快速发展的良好势头。</span>
          </div>
      </div>
          </div>
        </div>
      </div>
      <!-- 第二张横铺背景图片 -->
      <div class="logo">
        <img src="./2021_img/hengtu.jpg" alt="">
      </div>
      <!-- 二横图下的鲜花展示 -->
      <div class="center">
        <ul class="top d-flex">
          <li class="float-left">
            <img src="./2021_img/flower14.jpg" alt="">
            <div><button>向日葵花</button></div>
          </li>
          <li class="float-left"><img src="./2021_img/flower11.jpg" alt="">
            <div><button>清新花蓝</button></div></li>
          <li class="float-left"><img src="./2021_img/flower15.jpg" alt="">
          <div><button>太阳花束</button></div>
          </li>
          <li class="float-left"><img src="./2021_img/flower18.jpg" alt="">
          <div><button>粉色之恋</button></div>
          </li>
          <li class="float-left"><img src="./2021_img/hua1.jpg" alt="">
          <div><button>美丽花景</button></div>
          </li>
        </ul>
        <ul class="bottom d-flex">
          <li class="float-left">
            <img src="./2021_img/flower33.jpg" alt="">
            <div><button>爱心玫瑰</button></div>
          </li>
          <li class="float-left"><img src="./flower30.jpg" alt="">
            <div><button>粉红佳人</button></div></li>
          <li class="float-left"><img src="./flower31.jpg" alt="">
          <div><button>清新花束</button></div>
          </li>
          <li class="float-left"><img src="./flower32.jpg" alt="">
          <div><button>多色花束</button></div>
          </li>
          <li class="float-left"><img src="./flower33.jpg" alt="">
          <div><button>馨香百合</button></div>
          </li>
        </ul>
      </div>
      <!-- 页尾 -->
        <div class="one">
          <ul class="two d-flex">
              <li class="float-left">
                  <img src="./2021_img/footer.png" alt="">
                  <span>品牌精神</span>
                  <p>行业新品牌，引领 花卉行业新品质</p>
              </li>
              <li class="float-left">
                  <img src="./2021_img/footer2.png" alt="">
                  <span>退订无忧</span>
                  <p>网上订购货物，一律支持 7天无理由退货</p>
              </li>
              <li class="float-left">
                  <img src="./2021_img/footer6.png" alt="">
                  <span>邮资服务</span>
                  <p>网上下单，邮资服务支持 全场满199元包邮</p>
              </li>
              <li class="float-left">
                  <img src="./2021_img/footer4.png" alt="">
                  <span>运输包装</span>
                  <p>由于是鲜花类物品，包装前会用保鲜剂放礼盒</p>
              </li>
          </ul>
      </div>
</body>
</html>